<template>
    <div>
        <div class="head-nav">
            <div class="hn-box">
                <img src="../../assets/logo.png" alt="" srcset="" />
                <div class="gen">
                    <img src="../../assets/tiaozhuan2.png" alt="" srcset="" @click="showChoice = !showChoice" />
                </div>
                <div class="uls">
                    <ul class="top-nav">
                        <li>
                            <router-link exact to="/" class="router-link-active">首页</router-link>
                        </li>
                        <li>
                            <router-link to="/about" class="router-link-active">院部简介</router-link>
                        </li>
                        <li v-for="item in navlist" :key="item.id">
                            <router-link to="/" class="router-link-active">
                                {{ item.title }}
                                <div class="lichild" v-for="item1 in item.child" :key="item1">
                                    <router-link to="/about" class="router-link-active">
                                        <div class="lichild1">{{ item1.title }}</div>
                                    </router-link>
                                </div>
                            </router-link>
                        </li>
                        <!-- <li>
                        <router-link to="/home">专业介绍</router-link>
                    </li> -->
                        <li>
                            <router-link to="/" class="router-link-active">领导关怀</router-link>
                        </li>
                        <li>
                            <router-link to="/" class="router-link-active">对外交流</router-link>
                        </li>
                        <li>
                            <router-link to="/" class="router-link-active">社会服务</router-link>
                        </li>
                        <li>
                            <router-link to="/" class="router-link-active">师资力量</router-link>
                        </li>
                        <li>
                            <router-link to="/" class="router-link-active">实训中心</router-link>
                        </li>
                        <li>
                            <router-link to="/" class="router-link-active">实习基地</router-link>
                        </li>
                    </ul>
                    <ul class="top-nav1" v-show="showChoice">
                        <li v-for="(item, index) in nav" :key="index" @click="showChoice = !showChoice">
                            <router-link :to="item.rout" class="router-link-active">{{
                                item.text
                                }}</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import { getNavList } from "../../api/nav";
const navlist = ref();
const getnaavList = async () => {
    const {
        data: { data },
    } = await getNavList();
    navlist.value = data;
    console.log(data);
};
const ycVisible = ref(false); // 初始状态为隐藏
getnaavList();
// 调接口
//   手机显示ul

// 调接口结束
const toggleYCVisible = () => {
    console.log(ycVisible.value);
    ycVisible.value = !ycVisible.value;
    console.log(ycVisible.value);
};
// 菜单项数据


</script>

<style scoped lang="scss">

.head-nav {
    width: 100%;
    margin: auto;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    position: absolute;
    z-index: 999;

    .hn-box {
        width: 85%;
        margin: auto;
        line-height: 30px;
        display: flex;

        @media (max-width: 1024px) {
            height: 44px;
        }

        img {
            width: 15%;
            height: 64px;

            @media (max-width: 1024px) {
                width: 35%;
                height: 44px;
            }
        }

        .gen {
            display: none;
            height: 30px;

            @media (max-width: 1024px) {
                width: 8%;
                height: 30px;
                display: block;
                position: absolute;
                top: 5px;
                right: 10px;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .uls {
            width: 85%;

            @media (max-width: 1024px) {
                width: 95%;
                margin: auto;
                position: absolute;
                left: 10px;
                top: 25px;
            }

            .top-nav {
                width: 100%;
                display: flex;
                list-style-type: none;
                margin-top: 10px;

                @media (max-width: 1024px) {
                    width: 100%;
                    display: none;
                    background-color: rgba(0, 0, 0, 0.5);
                }

                li {
                    text-align: center;
                    width: 10%;
                    height: 44px;
                    line-height: 44px;

                    @media (max-width: 1024px) {
                        width: 100%;
                        text-align: center;
                        border-bottom: 1px solid white;
                        position: relative;
                        left: -20px;
                    }

                    .router-link-active {
                        color: white;
                        text-decoration-line: none;
                    }

                    .lichild {
                        display: none;
                        z-index: 999;
                        width: 140px;
                        background-color: rgba(0, 0, 0, 0.6);

                        a {
                            width: 100%;
                        }
                    }

                    &:hover .lichild {
                        display: block;
                        margin-left: -10%;
                    }
                }

                li:hover .router-link-active {
                    border-bottom: 3px solid blue;
                }
            }

            .top-nav1 {
                display: flex;
                width: 100%;

                @media (max-width: 1024px) {
                    display: block;
                    height: 440px;
                    background-color: rgba(0, 0, 0, 0.6);
                    position: absolute;
                    top: 0px;
                    z-index: 999;
                }

                li {
                    list-style: none;
                    flex: 1;
                    text-align: center;
                    padding-top: 10px;

                    @media (max-width: 1024px) {
                        // display: none;
                        line-height: 40px;
                        height: 40px;
                        width: 100%;
                        font-size: 12px;
                        text-align: left;
                    }

                    a {
                        text-decoration: none;
                        display: block;
                        padding-bottom: 8px;
                        color: #fff;
                        width: 80px;
                        height: 60px;
                        margin: auto;
                        line-height: 60px;

                        @media (max-width: 1024px) {
                            width: 90%;
                            margin: auto;
                        }

                        &:hover {
                            border-bottom: 4px solid #005bac;
                        }
                    }
                }
            }
        }
    }
}
</style>